<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick" class="my-tabs">
            <!--库存-->
            <el-tab-pane label="库存" name="store">
                <cardList_input sale-status=0 v-if="tabName=='store'"/>
            </el-tab-pane>
            <!--售出,使用v-if的作用是在当前tab页才渲染，不然所有的页面都会渲染和发送请求，性能不好-->
            <el-tab-pane label="售出" name="sale">
                <cardList_input sale-status=1 v-if="tabName=='sale'"/>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import cardList_input from './cardList_input'

    document.title = '卡板列表';
    export default {
        name: "cardList",
        components: {cardList_input},
        data() {
            return {
                activeName: 'store',
                tabName: 'store',
                tableData: [],
                searchFormData: {
                    channel: '',
                    combo: ''
                },
                channels: [{label: "通道1", value: 1},
                    {label: "通道2", value: 2},
                    {label: "通道3", value: 3}],
                combos:
                    [{label: "套餐1", value: 1},
                        {label: "套餐2", value: 2},
                        {label: "套餐3", value: 3}],
            }
        },
        methods: {
            handleClick(tab, event) {
                this.tabName = tab.name;
                console.log('tab点击操作', this.name, tab, event);
            },
        },
        mounted() {
            let obj = {
                date: '2016-05-01',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            };
            let i = 0;
            for (i = 0; i < 5; i++) {
                console.log("添加对象")
                this.$data.tableData.push(obj);
            }
        }
    }
</script>

<style>
    .my-tabs .el-tabs__header {
        text-align: center;
    }

    .my-tabs .el-tabs__nav-wrap {
        display: inline-block;
    }
</style>
